草庐IT

SVG 实例

全部标签

javascript - 如何使SVG图像图案填充随对象移动?

我有一些使用fill="url(#background)的平铺图像背景的SVG对象,我将#background定义为模式仅包含一个image。但是,当对象通过设置其x/y属性(或cx/cy,或任何其他定义偏移量的内容),背景不会随之移动。如何让背景也移动?来自HowwouldImoveanSVGpatternwithanelement我尝试设置patternContentUnits='objectBoundingBox'但这只会将图像变成纯色Blob(不过奇怪的是,根据图像着色,就好像它只是第一个像素或类似的像素).这是一个说明所有这些的jsfiddle-顶部的rect已变成纯色,然后

javascript - 在现有的、分离的 SVG 元素上创建 d3 选择

我有一个JavaScript组件,它将提供元素到它的主机。我想使用d3.js填充SVG元素。如果我让d3.js创建SVG元素并将其添加到,然后事情按预期工作:varchart=d3.select('body').append('svg');但是我已经有了一个SVG元素。我希望我的代码更接近于:varsvg=document.createElement('svg'),chart=d3.select(svg);后一种方法会填充SVG元素(如Chrome开发人员工具的元素面板中所示),但无法正确呈现。我是不是做错了?我不介意d3是否创建SVG元素,只要它不将它附加到DOM并且我可以访问它。编

javascript - 从 <object> 元素创建 Snap.svg 对象

Snap.svg的文档Snap()函数列出了创建Snap对象的三种可能方法。Snap(width,height)-创建给定尺寸的新空白Canvas。Snap(svgelement)-从现有的内联SVG元素创建SnapCanvasSnap(cssselector)-同上,但使用选择器而不是直接引用是否可以从嵌入为的SVG创建Snap对象元素或? 最佳答案 通过查看源代码,我认为只需执行Snap('#object-id')即可为您提供SVG,而不是执行.node.contentDocument。这可能是最近的一项改进,但截至今天,这已正

javascript - 在全局/根坐标中确定 SVG 视口(viewport)

在SVG元素中实际可见的内容取决于它的纵横比,它的viewBox值,及其preserveAspectRatio值(value)。例如,具有相同viewBox值(下方红色虚线)的相同SVG元素大小可以根据preserveAspectRatio具有不同视口(viewport)(下方蓝色部分):Chrome有一个viewport属性,但在我的使用中它始终是一个空的(全部为0值)SVGRect。Firefox不实现此属性。svg.getBBox()方法返回viewBox的值,而不是实际可见的视口(viewport)内容。给定对SVG元素的引用,我如何才能最轻松地确定可见内容(视口(viewpo

javascript - 使用 Webpack 将 SVG 附加到 DOM

目前,我的公司在我们的AngularJS网络应用程序的index.html中包含一个相当大的SVGSprite图,其中包含各种图标。主SVG由CSS隐藏,我们通过按ID选择它们来显示SVG中的各个图标:我们现在正尝试通过拆分SVG并将生成的部分内联到需要它们的页面上来减少我们网站的加载时间。由于我们也转向Webpack来捆绑我们的应用程序,我们希望在Angular模块中指定特定SVG文件的依赖项,然后让Webpack将SVG的内容(可能包装在div中)插入DOM.有没有办法用现有的装载机实现这一目标?我找到了基本上导出SVG内容的raw-loader。但是,我不知道如何将它与另一个将插

javascript - 从Typescript中的实例访问静态方法

为什么我不能这样做?是由于Javascript/Typescript的技术限制,还是Typescript开发人员的设计决定?同样的代码在Java或C#中也能正常工作。classTest{staticstr:string="test";publicstaticgetTest():string{returnthis.str;}}//worksasexpectedconsole.log(Test.getTest());//won'tcompilevartest:Test=newTest();console.log(test.getTest()); 最佳答案

javascript - 是xlink :href deprecated for svg <image>s?

根据MDNxlink:href,我们应该使用href而不是xlink:href,但是在svgexamplepage上(最后更新于2017年7月6日),示例中的属性是xlink:href。使用哪个属性重要吗? 最佳答案 即将推出的SVG2标准将取消对xlink:前缀的要求。一些浏览器支持该选项,但并非所有浏览器都支持。目前安全(且向后兼容)的选择是继续使用它。 关于javascript-是xlink:hrefdeprecatedforsvgs?,我们在StackOverflow上找到一个类

javascript - 除了对象之外,在 JavaScript 中调用的可实例化 "class"是什么?

我有一个这样的对象:functionPerson(){}除了对象,你会怎么调用它?明明不是类,那又是什么?我正在寻找一个不是对象的术语,因为我想特别强调您可以创建它的新实例这一事实。 最佳答案 “functionPerson(){}”是类型的构造函数。newPerson()的值将是类型Person的实例(或对象)。 关于javascript-除了对象之外,在JavaScript中调用的可实例化"class"是什么?,我们在StackOverflow上找到一个类似的问题:

javascript - 无论如何让实例共享相同的功能但同时具有私有(private)变量?

我有这段代码:varHuman=function(name){this._name=name;};Human.prototype.Shout=function(){alert(this._name);};vartom=newHuman("tom");varjohn=newHuman("john");alert(tom.Shout===john.Shout);现在._name不是“私有(private)的”。我想将._name设为“私有(private)”,但同时我不希望为每个Human实例创建附加函数(换句话说,tom.Shout必须===tojohn.Shout),因为为创建附加函数

javascript - 通过从构造函数返回现有实例来实现 javascript 实例存储

我正在尝试在Backbone.js中实现我的“实例存储”版本,正如Soundcloud在他们最近的博客文章中所描述的那样:http://backstage.soundcloud.com/2012/06/building-the-next-soundcloud/相关摘录:为了解决这个问题,我们使用了一个我们称之为实例存储的结构。这个存储是一个对象,每次调用模型的构造函数时都会隐式访问和修改它。首次构建模型时,它会将自己注入(inject)到商店中,使用其id作为唯一键。如果使用相同的id调用相同的模型构造函数,则返回原始实例。vars1=newSound({id:123}),s2=new